<template>
  <a-descriptions
    v-show="renderFields.length"
    bordered
    :size="size"
    :title="title"
    :layout="layout"
    :style="style"
    class="animate__animated animate__fadeIn"
  >
    <a-descriptions-item
      v-for="(item, i) in renderFields"
      :key="i"
      :label="item.label"
      :span="listLayout ? 3 : item.span || 1"
    >
      <template v-if="readonly">
        <div class="ant-input">{{ srcData[item.field] }}</div>
      </template>
      <template v-else-if="item.type === TYPE_DATE">
        <a-date-picker v-model="srcData[item.field]" />
      </template>
      <template v-else-if="item.type === TYPE_TEXTAREA">
        <a-textarea
          v-model="srcData[item.field]"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </template>
      <template v-else-if="item.type === TYPE_TEXT">
        <div class="ant-input" disabled="true" :title="srcData[item.field]">{{ srcData[item.field] }}</div>
      </template>
      <template v-else-if="item.type === TYPE_SELECTOR">
        <a-select
          class="w-full"
          v-model="srcData[item.field]"
          v-if="dictionary[item.dict]"
        >
          <a-select-option
            v-for="(d, i) in dictionary[item.dict]"
            v-if="item.value && item.value === VALUE_DICTNAME"
            :key="i"
            :value="d.name"
          >{{ d.name }}</a-select-option>
          <a-select-option
            v-if="!item.value || item.value !== VALUE_DICTNAME"
            v-for="(d, i) in dictionary[item.dict]"
            :key="i"
            :value="d.value"
          >{{ d.name }}</a-select-option>
        </a-select>
      </template>
      <template v-else-if="item.type === TYPE_TREESELECTOR && '浙江行政区划' === item.dict">
        <a-tree-select
          class="w-full"
          v-model="srcData[item.field]"
          :dropdown-style="{ maxHeight: '350px', overflow: 'auto' }"
          :tree-data="zjxzList"
          :replaceFields="{ value: 'name', title: 'name', children: 'children' }"
          @select="selectNode"
        >
        </a-tree-select>
      </template>
      <template v-else-if="item.type === TYPE_TREESELECTOR && '土地利用现状分类' === item.dict">
        <a-tree-select
          class="w-full"
          v-model="srcData[item.field]"
          :dropdown-style="{ maxHeight: '350px', overflow: 'auto' }"
          :tree-data="tdytList"
          :replaceFields="{ value: 'name', title: 'name', children: 'children' }"
        >
        </a-tree-select>
      </template>
      <template v-else>
        <a-input v-model="srcData[item.field]" />
      </template>
      <template v-if="showFlg && item.required === '1' && !srcData[item.field]">
        <span style="color: red">{{ item.label }}</span>
      </template>
    </a-descriptions-item>
    ></a-descriptions>
</template>
<script>
import {
  TYPE_DATE,
  TYPE_SELECTOR,
  TYPE_TREESELECTOR,
  TYPE_TEXTAREA,
  TYPE_TEXT,
  VALUE_DICTNAME
} from './config'
import form from './form'
import dicService from '@/api/dicService'

export default {
  mixins: [form],
  inject: ['readonly'],
  props: {
    title: {
      type: String,
      default: ''
    },
    // 列表布局
    listLayout: {
      type: Boolean,
      default: false
    },
    // 垂直布局
    vercical: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    }
  },
  data () {
    return {
      TYPE_DATE,
      TYPE_TEXT,
      TYPE_SELECTOR,
      TYPE_TREESELECTOR,
      TYPE_TEXTAREA,
      VALUE_DICTNAME,
      zjxzList: [],
      tdytList: [],
      showFlg: false
    }
  },
  async mounted () {
    await this.init()
    this.Event.$on('SHOW_INIT', () => {
      this.showFlg = true
    })
  },
  methods: {
    async init () {
      this.zjxzList = await dicService.treeDicItemByDicName('浙江行政区划', '/')
      this.tdytList = await dicService.treeDicItemByDicName('土地利用现状分类', '/')
      this.filterTree(this.zjxzList)
    },
    selectNode () {
      this.init()
    },
    filterTree (list) {
      for (let i in list) {
        if (!list[i].children) {
          // 证明是最后一级，取值
          list[i] = Object.assign(list[i],{"disabled": false})
        } else {
          // 证明不是最后一级，继续找
          list[i] = Object.assign(list[i],{"disabled": true})
          this.filterTree(list[i].children)
        }
      }
      this.zjxzList = list
    }
  },
  computed: {
    layout () {
      return this.vercical ? 'vertical' : 'horizontal'
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/less/app.utilities.less';
@import '~@/less/app.mixins.less';
/deep/ .ant-input {
  border: none;
  &:focus {
    box-shadow: none;
  }
}
/deep/ .ant-select-selection {
  border: none;
}
/deep/ .ant-descriptions-item-label {
  width: var(--label-width);
  .text-md;
  background: @grid-form-label-bg;
  padding: 10px 20px !important;
}
/deep/ .ant-descriptions-item-content {
  padding: 0 !important;
  width: var(--label-width);
  .ant-input {
    .text-md;
    height: 42px;
    padding: 10px !important;
  }
}
/deep/ .ant-descriptions-view,
/deep/ .ant-descriptions-item-label,
/deep/ .ant-descriptions-item-content,
/deep/ .ant-descriptions-row
{
  border-color: @grid-form-border-color;
}
</style>
